<template>
  <div class="container-table">
    <el-form
      ref="ruleFormRef"
      label-width="8rem"
      size="large"
      :model="data.goodsFrom"
      :rules="rules"
    >
      <el-row>
        <el-col :span="24">
          <UploadExecl>
            <el-button type="primary" link class="execl"
              >导入execl文件</el-button
            >
          </UploadExecl>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="8">
          <el-form-item label="条码" prop="goods_code">
            <el-input
              v-model="goodsFrom.goods_code"
              clearable
              style="width: 14rem"
            />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="一级类别" prop="onetypes">
            <el-select
              clearable
              v-model="goodsFrom.onetypes"
              size="large"
              @change="handleChange"
            >
              <el-option
                v-for="one in goodsSearch.oneTypeList"
                :key="one.category_oneId"
                :label="one.category_oneName"
                :value="one.category_oneId"
              ></el-option>
            </el-select> </el-form-item
        ></el-col>
        <el-col :span="8">
          <el-form-item label="二级类别" prop="twotypes">
            <el-select clearable v-model="goodsFrom.twotypes" size="large">
              <el-option
                v-for="two in data.twoList"
                :key="two.category_twoId"
                :label="two.category_twoName"
                :value="two.category_twoId"
              ></el-option> </el-select></el-form-item
        ></el-col>
      </el-row>
      <el-row>
        <el-col :span="8">
          <el-form-item label="商品名称" prop="goods_name">
            <el-input
              v-model="goodsFrom.goods_name"
              clearable
              style="width: 14rem"
            />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="单位" prop="goods_unit">
            <el-input
              v-model="goodsFrom.goods_unit"
              clearable
              style="width: 14rem"
            /> </el-form-item
        ></el-col>
        <el-col :span="8">
          <el-form-item label="当前售价" prop="goods_price">
            <el-input
              v-model="goodsFrom.goods_price"
              clearable
              style="width: 14rem"
            /> </el-form-item
        ></el-col>
      </el-row>
      <el-row>
        <el-col :span="24" class="buttonCol">
          <el-button type="primary" class="addButton" @click="add(ruleFormRef)"
            >添加</el-button
          >
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>

<script setup>
import { computed, watch, reactive, ref } from 'vue'
import { useStore } from 'vuex'
import { reqInsertGoods } from '@/api/goods'
import { ElMessage } from 'element-plus'
import UploadExecl from '../../../components/UploadExecl/index.vue'
const ruleFormRef = ref()
const data = reactive({
  goodsFrom: {
    goods_code: null,
    goods_name: null,
    goods_unit: null,
    goods_price: null,
    onetypes: null,
    twotypes: null
  },
  twoList: [],
  rules: {
    goods_code: [{ required: true, message: '条码不能为空', trigger: 'blur' }],
    goods_name: [
      { required: true, message: '商品名称不能为空', trigger: 'blur' }
    ],
    goods_unit: [{ required: true, message: '单位不能为空', trigger: 'blur' }],
    goods_price: [
      { required: true, message: '当前售价不能为空', trigger: 'blur' }
    ],
    onetypes: [
      { required: true, message: '一级类别不能为空', trigger: 'change' }
    ],
    twotypes: [
      { required: true, message: '二级类别不能为空', trigger: 'change' }
    ]
  }
})
const { goodsFrom, rules } = data
const store = useStore()
const { getters } = store
// 添加按钮
const add = async (formEl) => {
  if (!formEl) return
  formEl.validate(async (valid) => {
    if (valid) {
      const result = await reqInsertGoods([
        {
          goods_code: data.goodsFrom.goods_code,
          goods_name: data.goodsFrom.goods_name,
          goods_unit: data.goodsFrom.goods_unit,
          goods_price: data.goodsFrom.goods_price,
          goods_category: data.goodsFrom.onetypes
        }
      ])
      if (result.code === 200 && result.data === 1) {
        ElMessage({
          message: result.msg,
          type: 'success'
        })
        data.goodsFrom.goods_code = null
        data.goodsFrom.goods_name = null
        data.goodsFrom.goods_unit = null
        data.goodsFrom.goods_price = null
        data.goodsFrom.onetypes = null
        data.goodsFrom.twotypes = null
      } else {
        ElMessage.error(result.msg)
      }
    } else {
      return false
    }
  })
}
// 切换一级类别的方法
const handleChange = () => {
  data.goodsFrom.twotypes = ''
}
// 仓库中的数据
const goodsSearch = computed(() => getters.goodsSearch)
watch(data.goodsFrom, (newValue, oldValue) => {
  const result = goodsSearch.value.twoTypeList.filter((e) => {
    return e.onetypes[0].category_oneId === data.goodsFrom.onetypes
  })
  data.twoList = [...result]
})
</script>

<style lang="scss" scoped>
.el-row {
  margin-top: 2rem;
  .execl {
    margin-left: 2rem;
  }
  .buttonCol {
    display: flex;
    justify-content: center;
    margin-top: 3rem;
    .addButton {
      width: 16rem;
    }
  }
}
</style>
